<template>
  <div id="adsDialog" class="dialog" v-if="visible">
    <div class="dialog_body">
      <img
        ref="tipImg"
        v-if="type === 1"
        src="../assets/tips_1.png"
        alt=""
        @click="handleCancel"
      />
      <img
        ref="tipImg"
        v-if="type === 2"
        src="../assets/tips_2.png"
        alt=""
        @click="handleCancel"
      />
      <img
        ref="tipImg"
        v-if="type === 3"
        src="../assets/tips_3.png"
        alt=""
        @click="handleCancel"
      />
      <img
        ref="tipImg"
        v-if="type === 4"
        src="../assets/tips_4.png"
        alt=""
        @click="handleCancel"
      />
      <img
        ref="tipImg"
        v-if="type === 5"
        src="../assets/tips_5.png"
        alt=""
        @click="handleCancel"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  type: {
    type: Number,
  },
})

const emit = defineEmits(['close'])

const tipImg = ref<HTMLImageElement | null>(null)

const handleCancel = (e: MouseEvent) => {
  const width = tipImg.value!.clientWidth
  const height = tipImg.value!.clientHeight
  const x = Number(((e.offsetX / width) * 100).toFixed(2))
  const y = Number(((e.offsetY / height) * 100).toFixed(2))
  console.log(x, y)
  if (x > 88 && x < 97 && y > 7 && y < 17) {
    emit('close')
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  .dialog_body {
    width: 80%;
  }
}
</style>
